<template>
	<view class="content">
		
		<view class="topbg">
			<view class="text1">消费专区</view>
		</view>
		
		<!-- 导航滑块开始 -->
		<scroll-view class="sliding" scroll-x>
			<text class="slidingMenuList" :class="{fontRed:catid==0}" @click="getActive(0)">全部</text>
			<text class="slidingMenuList" :class="{fontRed:catid==item.id}" v-for="item in cateList" :key="item.id" @click="getActive(item.id)">{{item.name}}</text>
		</scroll-view>
		<!-- 导航滑块开始 -->

		<view class="goods-info">
			<!-- 空白页 -->
			<empty v-if="loaded === true && goodsList.length === 0"></empty>

			<!-- 订单列表 -->
			<view class="goods-list">
				<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="$api.toUrl(`/pages/menu1/detail?id=${item.id}`)">
					<image class="goods-img" :src="item.thumb || '/static/images/errorImage.jpg'" mode="aspectFill"></image>
					<view class="right">
						<view class="title clamp">{{ item.name }}</view>
						<view class="price1">￥{{ item.price }}</view>
						<view class="des"><text>{{ item.description }}</text></view>
					</view>
				</view>
			</view>

			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			headerPosition: 'fixed',
			headerTop: '0px',
			loaded: false, //加载完成
			loadingType: 'more', //加载更多状态
			
			catid: 0,
			cateList: [],
			
			goodsList: [],
			p: 1,
			size: 20,
			count: 0
		};
	},
	onLoad() {
		// #ifdef H5
		this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
		// #endif
		
		//加载分类
		this.categorylist();
		
		this.loadData();
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	//上拉加载更多数据
	onReachBottom() {
		this.loadData();
	},
	methods: {
		// 点击头部标题
		getActive(id) {
			this.catid = id;
			
			this.goodsList = [];
			this.p = 1;
			this.size = 20;
			this.count = 0;
			
			this.loaded = false;
			this.loadingType = 'more';
			
			this.loadData();
		},
		async categorylist(){
			const param = {};
			param.typeid = 1;
			await this.$http.request('Goods', 'categorylist', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.cateList =  res.data.data;
					}
				}
			});
		},
		//加载商品 ，带下拉刷新和上滑加载
		async loadData(type = 'add') {
			//防止重复加载
			if (this.loadingType === 'loading') {
				return;
			}

			//没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else {
				this.loadingType = 'more';
			}

			if (type === 'refresh') {
				this.goodsList = [];
				this.p = 1;
				this.count = 0;
				this.loaded = false;
				//下拉刷新停止
				uni.stopPullDownRefresh();
			}

			const param = {};
			param.typeid = 1;
			param.catid = this.catid;
			param.p = this.p;
			param.size = this.size;

			await this.$http.request('Goods', 'goodslist', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						if (res.data.data.count > 0) {
							this.goodsList = this.goodsList.concat(res.data.data.list);
						}

						this.p = this.p + 1;
						this.count = res.data.data.count;
						this.loaded = true;

						//判断是否还有下一页，有是more  没有是nomore
						this.loadingType = this.count <= (this.p - 1) * this.size ? 'nomore' : 'more';
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>

page,
.content {
	background: $page-color-base;
}

.topbg{
	width: 100%;
	height: 360upx;
	overflow: hidden;
	background: url('/static/images/goods1.png') no-repeat;
	background-size: contain;
	position: relative;
	z-index: 99999;
	
	.text1{
		position: absolute;
		left: 0upx;
		bottom: 0upx;
		width: 100%;
		height: 80upx;
		overflow: hidden;
		background: url('/static/images/top_bg1.png') no-repeat;
		background-size: cover;
		font-size: 40upx;
		line-height: 80upx;
		padding-left: 20upx;
		color: #4d1dbb;
	}
	
}


.sliding::-webkit-scrollbar {
	width:0;
	height:0;
	background-color: transparent;
}

// 滑块区域开始
.sliding {
	position: fixed;
	z-index: 9999;
	background-color: #FFFFFF;
	display: flex;
	white-space: nowrap;
	font-size: 15upx;
	width: 100%;
	height: 80upx;
	line-height: 80upx;
	border-radius: 16upx;

	.slidingMenuList {
		height: 68upx;
		line-height: 68upx;
		font-size: 28upx;
		margin-right: 10upx;
		padding: 0upx 20upx;
	}

	// 头部下划线
	.fontRed {
		font-size: 30upx;
		position: relative;
		color: red;

		&::before {
			content: '';
			position: absolute;
			height: 6upx;
			width: 56upx;
			background: red;
			bottom: -10upx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}

/* 商品列表 */
.goods-info{
	padding-top: 95upx;
}

.goods-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20upx;
	background: #fff;
	
	.goods-item {
		display: flex;
		padding: 20upx 0;
		width: 100%;
		
		.goods-img {
			display: block;
			width: 180upx;
			height: 180upx;
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 0upx 0 24upx;
			overflow: hidden;
			width: 100%;
			
			
			.title {
				font-size: 30upx;
				height: 40upx;
				line-height: 40upx;
				overflow: hidden;
				font-weight: bold;
				color: $font-color-dark;
			}
			
			.price {
				font-size: 36upx;
				line-height: 40upx;
				color: #ff0000;
				margin-top: 10upx;
				
				text{
					color: #999;
					font-size: 24upx;
					margin-left: 10upx;
				}
			}
			
			.price1 {
				font-size: 36upx;
				line-height: 40upx;
				color: #4399fc;
				margin-top: 10upx;
				
				text{
					color: #999;
					font-size: 24upx;
					margin-left: 10upx;
				}
			}
			
			.des {
				font-size: 36upx;
				line-height: 40upx;
				color: #ff0000;
				
				text{
					color: #999;
					font-size: 24upx;
				}
			}
			
			
		}
	}
	
}

</style>